<template>
    <project-list :table-data="tableData" page-title="已办事宜" :page-icon="img15" :get-list="getList">
        <template #tablePc>
            <el-tabs v-model="formData.conditions.lxyt" class="w100 demo-tabs" @tab-click="handleChangeTab">
                <el-tab-pane v-for="(item, index) in tabData" :key="index" :label="item.title" :name="item.code">
                    <el-table
                        v-loading="loading" :data="tableData" header-cell-class-name="table-header" row-key="uuid"
                        :row-class-name="setRowClass" @row-click="handleSelectionChange"
                    >
                        <el-table-column prop="gcmc" label="立项名称" />
                        <el-table-column prop="sqr" label="申请人" />
                        <el-table-column prop="sqrq" label="申请日期" />
                        <el-table-column prop="nodeName" label="当前节点" />
                        <el-table-column prop="operatorName" label="未操作者" />
                    </el-table>
                </el-tab-pane>
            </el-tabs>

            <div class="paginationBox flexR-Cen">
                <pagination
                    v-model:total="total" v-model:page="paginationQuery.pageNo"
                    v-model:limit="paginationQuery.PageSize" layout="total, ->, prev, pager, next, jumper"
                    @pagination="getList" @update:limit="changeLimit"
                />
            </div>
        </template>
        <template #tableMob>
            <div
                v-for="(item, index) in tableData" :key="index" class="cardBox flexC-FS-C"
                :class="item.projectId == selectedrowData.projectId ? 'selected-row-color' : ''"
                @click="handleSelectionChange(item)"
            >
                <el-row :gutter="20" class="rowBox">
                    <el-col :span="24">
                        <el-row :gutter="20">
                            <el-col class="title-span" :span="6">立项名称</el-col>
                            <el-col class="value-span" :span="18">{{ item.gcmc }}</el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="24" class="mt15">
                        <el-row :gutter="20">
                            <el-col class="title-span" :span="6">申请人</el-col>
                            <el-col class="value-span" :span="18">{{ item.sqr }}</el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="24" class="mt15">
                        <el-row :gutter="20">
                            <el-col class="title-span" :span="6">申请日期</el-col>
                            <el-col class="value-span" :span="18">{{ item.sqrq }}</el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="24" class="mt15">
                        <el-row :gutter="20">
                            <el-col class="title-span" :span="6">当前节点</el-col>
                            <el-col class="value-span" :span="18">{{ item.nodeName }}</el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="24" class="mt15">
                        <el-row :gutter="20">
                            <el-col class="title-span" :span="6">未操作者</el-col>
                            <el-col class="value-span" :span="18">{{ item.operatorName }}</el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </div>
        </template>
    </project-list>
</template>

<script setup>
import { getHandledListApi } from '@/api/projects'

import commonData from '@/hooks/commonData'
import projectsData from '@/hooks/projectsData'
const { initAos, handleToContractDetails, total, paginationQuery, changeLimit, img15 } = commonData()

const formData = reactive({
    conditions: {
        lxyt: '0',
        projectName: ''
    }
})

const {
    loading,
    tableData,
    selectedrowData,
    tabData,
    setRowClass,
    handleChangeTab,
    handleSelectionChange,
    getList
} = projectsData({
    formData,
    paginationQuery,
    apiList: getHandledListApi,
    initAos,
    handleToContractDetails,
    total,
    pageType: 'childrenPage'
})
</script>

<style lang='scss'>
[data-mode="pc"] {
    .projects {
        .table-header {
            height: 54px;
            background: #f7fafb !important;
            font-size: 14px;
        }
        .table-row {
            height: 60px;
            font-size: 15px;
            border-bottom: 1px solid #f0f2f5;
        }
        .paginationBox {
            width: 100%;
            background: #fff;
            padding: 4px 0;
        }
    }
}
[data-mode="mobile"] {
    .projects {
        .cardBox {
            width: 100%;
            padding: 20px 16px 12px;
            background: #fff;
            margin-bottom: 10px;
            .rowBox {
                width: 100%;
                padding-bottom: 17px;
                margin-bottom: 17px;
                border-bottom: 1px dashed #979797;
                .title-span {
                    width: 56px;
                    font-size: 14px;
                    color: rgb(0 0 0);
                }
                .value-span {
                    font-size: 14px;
                    color: #666;
                }
            }
            .lixiang-button {
                border-radius: 15px;
            }
        }
    }
}
</style>
